<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.is-safe {
  height: 134upx;
  height: calc(134upx+ constant(safe-area-inset-bottom));
  height: calc(134upx + env(safe-area-inset-bottom));
}
.xjw-foot {
  position: relative;
  .xjw-foot_empty {
    @extend .is-safe;
    width: 100%;
    &.is-top {
      padding-top: 48upx;
    }
  }
  .xjw-foot_main {
    @extend .is-safe;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    &--shadow {
      box-shadow: 0px -12upx 38upx 0px rgba(0, 0, 0, 0.06);
    }
    &--fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 10;
    }
  }
}
</style>
<template>
  <view class="xjw-foot">
    <view class="xjw-foot_empty" v-if="isFixed" :class="{ 'is-top': emptyPad }">
    </view>
    <view
      class="xjw-foot_main"
      :style="{ padding: pad + 'rpx ' + lpad + 'rpx' }"
      :class="{
        'xjw-foot_main--fixed': isFixed,
        'xjw-foot_main--shadow': shadow,
      }"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
@Component
export default class Index extends Vue {
  @Prop({ type: Boolean, default: true }) isFixed;
  @Prop({ type: Boolean, default: false }) shadow;
  @Prop({ type: Number, default: 16 }) pad; //上下间距的panding
  @Prop({ type: Number, default: 32 }) lpad; //左右间距
  @Prop({ type: Boolean, default: true }) emptyPad;
}
</script>
